<template>
	<view class="flex-center">
		<view class="card">
			<view class="info" style="display: flex; flex-direction: row;">

				<view class="image" v-if="!isTop">
					<image :src="showImage"  @error="handleImageErr()" mode="" style="width: 50px; height: 50px; padding-right: 10px;"></image>
				</view>
				<view class="title">
					{{title}}
				</view>
			</view>
			<view class="footer flex-jc-bet">
				<view class="info">
					<view class="info-item red" v-if="isTop">
						置顶
					</view>
					<view class="info-item">
						{{from}}
					</view>
					<view class="info-item pinglun">
						{{num}}评
					</view>
				</view>
				<view class="info-item">
					{{time}}
				</view>
			</view>

			<slot name="tips"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "card",
		data() {
			return {
				imageDefault:'/static/imageDefault.png',
				imageFaild: '/static/imageErr.png',
				Errorimage:false
			};
		},
		props: {
			title: {
				type: String,
				default: "新闻标题",
				require: true
			},
			num: {
				type: Number,
				default: 0,
				require: true
			},
			from: {
				type: String,
				default: "来源",
				require: true
			},
			time: {
				type: String,
				default: "2025.10.29",
				require: true
			},
			isTop: {
				type: Boolean,
				default: true,
				// default:false
				require: true
			},
			showSearch: {
				type: Boolean,
				default: true,
				// default:false
				require: false
			},
			image: {
				type: String,
				default: '',
				require: false
			}

		},
		computed: {
			// 图片容错
			showImage() {
				if (this.image) {
					if (this.Errorimage) {
						console.log('showImage Error'+this.title);
					}
					return this.Errorimage?this.imageFaild:this.image
				}else{
					console.log("showImage Default"+this.title);
					return this.imageDefault
				}
			}
		},
		methods:{
			handleImageErr(index){
				this.Errorimage=true
				this.$set(this.image,index,this.imageError)
			}
		}
	}
</script>

<style>
	.card {
		margin: 5px 0px;
		padding: 8px;
		box-sizing: border-box;
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}

	.footer {
		font-size: 12px;
		color: grey;
	}

	.title {
		/* 核心样式 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 限制显示的行数 */
		overflow: hidden;
		/* 隐藏溢出内容 */

		/* 辅助样式 */
		width: 100%;
		line-height: 1.5;
		/* 行高影响显示效果 */
		height: 50px;


	}

	.footer {
		padding-top: 10px;
	}

	.info {
		display: flex;
	}

	.info-item {
		padding-right: 10px;
	}
</style>